<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      crossorigin="anonymous"
      integrity="sha384-M86HUGbBFILBBZ9ykMAbT3nVb0+2C7yZlF8X2CiKNpDOQjKroMJqIeGZ/Le8N2Qp"
      href="https://lib.baomitu.com/normalize/latest/normalize.css"
      rel="stylesheet"
    />
    <style>
      body {
        /* display: flex;
        align-items: center;
        justify-content: center; */
        height: 100vh;
      }
      .father {
        background-color: rgb(203, 112, 112);
        display: table;
        
      }
      .son {
        /* flex-basis:10px; */
        height: 100px;
        width: 100px;
        /* float: left; */
      }
      .son1 {
        background-color: #b8c637;
        
      }
      .son2 {
        background-color: #3185a9;


      }
      .son3 {
        background-color: #29c239;
      }
      .son4 {
        background-color: #c22970;
      }
      .son5 {
        background-color: #b55bd0;
      }
      .son6 {
        background-color: #9e68c2;
      }
      .son7 {
        background-color: #d88fb1;
      }
    </style>
    <style>
    * {
      margin: 0;
      padding: 0;
  }
  .left{
      background: #73DE80;    /* 绿色 */
      opacity: 0.5;
      border: 3px solid #F31264;
      width: 200px;
      height: 200px;
      float: left;
  }
  .right{                        /* 粉色 */
      background: #EF5BE2;
      opacity: 0.5;
      border: 3px solid #F31264;
      width:400px;
      min-height: 100px;
  }
  .box{
      background:#888;
      height: 100%;
      margin-left: 50px;
  }
</style>
  </head>
  <!-- <script src="./promise.js"></script>
  <script src="./test.js"></script> -->
  <script></script>
  <body>
    <div class='box'>
      <div class='left'> </div>
      <div class='right'> </div>
  </div>
  </body>
</html>
